<template>
  <div class="header">
    <div class="container"  :style="style" >
       <div class="container-left" ><img src="@/assets/img/icon/logo.png" alt="青秧" @click="Controller('home')" > </div>
       <div class="container-middle" >
         <div class="container-search" >
            <el-input
              size="small"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input1">
            </el-input>
        </div>
        <div class="qy-font-limits"  v-for="(item,index) in listData" :key="index" >
          <span class="container-tab" >{{item}}</span>
        </div>
       </div>
       <div class="container-right" >
          <div class="btn-new" ><i class="el-icon-circle-plus" ></i><span>新建</span></div>
          <div class="btn-notice" ><i class="el-icon-bell" ></i> </div>
          <div class="btn-avator" >
            <el-popover
              placement="top-start"
              :width="200"
              trigger="click"
            >
              <template #reference>
                <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              </template>
              <div class="user-box">
                <div class="user-box-item qy-font-weight" >Keller</div>
                <div class="user-box-item user-box-line"><span class="user-box-gray" >升级会员享更多权益</span><span class="user-box-up" >立即升级</span></div>
                <div class="user-box-item"><i class="el-icon-user" ></i><span class="qy-padl10"  @click="Controller('center')" >个人主页</span></div>
                <div class="user-box-item"><i class="el-icon-setting" ></i><span class="qy-padl10">账户设置</span></div>
                <div class="user-box-item"><i class="el-icon-refresh" ></i><span class="qy-padl10">English</span></div>
                <div class="user-box-item"><i class="el-icon-reading" ></i><span class="qy-padl10">帮助文档</span></div>
                <div class="user-box-item"><i class="el-icon-switch-button" ></i><span class="qy-padl10">退出登录</span></div>
              </div>
            </el-popover>
          </div>
       </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "qy-navigation",
  setup() {
    // 定义路由
    const router = useRouter();
    const route = useRoute();
    // 定义存储
    const store = useStore();
    // 定义数据
    const state = reactive({
      listData:['工作台','空间','发现','帮助','反馈'],
      input1: '',
      style:''
    });
    // 处理白名单路由
    const whiteRoute = ['/center/main','/center/edit']
    const pageRoute = route.path
    console.log(pageRoute)
    if(whiteRoute.indexOf(pageRoute) !== -1){
       state.style="width:80vw;margin-left:10vw;padding:0"
    }
    const initData = () => {
      console.log("初始化数据");
    };
    const Controller = ((param1,param2,param3,param4) => {
      switch(param1){
        case 'home':
          router.push({path:"/"})
        break;
        case 'tab':
          store.dispatch('app/navigationClick',param3)
          router.push({path:param2})
        break;
        case 'tab_fun': 
          if(param2 == 'link'){
            router.push(param3);
          } else if(param2 == 'func'){
            emit(param4); 
          }
        break;
        case 'tab_search':
          emit(param2,state.searchVal)
        break;
        case 'center':
          router.push('/center/main')
        break;
        default: 
        break;
      }
    })
    return {
      ...toRefs(state),
      initData,
      Controller
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  height: 60px;
  background: $white;
  border-bottom: 1px solid #e8e8e8;
  .container{
    max-width: 100%;
    height: 100%;
    padding: 0 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .container .container-left{
    text-align: left;
    width: 256px;
    min-width: 256px;
    img{
      width: auto;
      height: 32px;
    }
  }
  .container .container-middle{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding-left: 10px;
    width: calc(100vw - 256px - 280px);
    .container-search{
      margin-right: 10px;
    }
    .container-tab{
      font-size: 14px;
      padding: 0 14px;
      cursor: pointer;
    }
    .container-tab:hover{
      color: $gray-weight;
    }
  }
  .container .container-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 280px;
    cursor: pointer;
    .btn-new{
      font-size: 18px;
      padding: 0 5px;
      color: $green-weight;
      display: flex;
      align-items: center;
      span{
        font-size: 14px;
        margin-top: -2px;
        color: $black-light;
        padding: 0 10px;
      }
    }
    .btn-notice{
      padding-right: 20px;
      font-size: 18px;
    }
  }
}
.user-box{
  .user-box-item{
    padding:10px;
    cursor: pointer;
  }
  .user-box-item:hover{
    color: $gray-weight;
  }
  .user-box-gray{
    color: $gray-weight;
    font-size: 12px;
  }
  .user-box-up{
    color: $blue-weight;
    font-size: 12px;
    padding-left: 10px;
  }
  .user-box-line{
    border-bottom: 1px solid $sidebar-border;
  }
}
</style>